<template>
  <div :class="className" style="height:calc(100%);width:calc(100%)" />
</template>

<script>
import * as echarts from 'echarts/lib/echarts' // echarts theme
import resize from '../mixins/resize'
require('echarts/theme/macarons')

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartOption: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    chartOption: {
      deep: true,
      handler (val) {
        this.setOptions(val)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartOption)
      this.chart.on('click', param => {
        this.$emit('click', param)
      })
    },
    setOptions (option) {
      this.chart.setOption(option)
    }
  }
}
</script>
